<template>
  <div>
    <el-skeleton :loading="isLoad" :rows="10" animated>
      <el-menu
        :router="true"
        :default-active="activeIndex" 
        @select="handleSelect"
        class="el-menu-vertical-demo"
        unique-opened
      >
        <template v-for="item in bindData">
          <el-menu-item
            :key="item.id"
            v-if="item.children.length === 0"
            :index="item.url">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>

          <el-sub-menu v-else :key="item.id" :index="item.url">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="item2 in item.children"
                :key="item2.id"
                :index="item2.url"
              >
                <i :class="item2.icon"></i> {{ item2.name }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watchEffect } from 'vue'
import { getMyMenu } from '../api/org';
import { useRoute, useRouter } from 'vue-router';
import { closeLoad, openLoad } from '@/utils/loading';

export default defineComponent({
  
  setup() {
    const routes=useRoute();
    const router=useRouter();
    const data=reactive<any>({
      bindData:[],
      isLoad:true,
      activeIndex:"",
    });
    
    const events={
      //路由跳转完成触发 此方法应放于watchEffect监听事件
      setCurrentRoute:()=> {
      closeLoad();
      data.activeIndex =routes.meta.url; //关键   通过他就可以监听到当前路由状态并激活当前菜单     选中哪个哪个高亮
     
    },
    //点击菜单路由触发
    handleSelect:(data:any)=> {
      if(data==routes.path){
        return;
      }
      
        router.replace({ path: data });
        openLoad("请稍后");
    },

        getMyMenu:()=>{
          getMyMenu({}).then((res:any)=>{
          if(res.result===0){
               data.bindData = res.data;
               data.isLoad=false;
           }   
     })
        },

        
    };

    onMounted(()=>{
       events.getMyMenu();
    })

    watchEffect(()=>{
      events.setCurrentRoute();
    })
     
    return{
      ...toRefs(data),
      ...events
    }
  },
})
</script>



<style scoped>
.el-menu {
  border-right: 0px solid #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #fff;
}

.el-sub-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 45px;
  min-width: 150px;
}



.el-menu-item.is-active {
      background-color: rgb(235, 236, 255) !important;
    }

</style>